<template>
	<view class="y-flex">
		<view class="y-flex">
			<view class="y-flex y-row y-align-center" @tap="handleTap">
				<com-avatar size="60" class="mr-20" lazy-load :src="item.avatar"></com-avatar>
				<view class="y-flex y-justify-between y-flex-1" v-if="item.title">
					<com-text :size="26" :color="skinColor.color_1" :lines="1" :value="item.title" />
					<com-text class="mt-10" :size="20" :color="skinColor.color_2" :lines="1" :value="item.subtitle" v-if="item.subtitle" />
				</view>
			</view>
			<com-text class="mt-20" :size="30" :color="skinColor.color_1" :lines="cellDescriptionLines" :value="item.description" v-if="item.description" @click="handleTap" />
			<com-grid class="mt-20" :data="item.images"
			v-if="item.images && item.images.length > 0"
			:column="cellImageColumn">
				<template v-slot="data">
					<find-image :src="data.item"
					:border-radius="cellImageBorderRadius"
					:tip-size="cellImageTipSize"
					:style="{'height': _pixelunit(cellImageHeight)}" enable-preview class="y-flex-1" mode="aspectFill"></find-image>
				</template>
			</com-grid>
			<view class="t-cell-video position-relative bg-000 mt-20" v-if="item.video && (item.video.cover || item.video.src)">
				<view class="y-flex y-flex-1"
				@appear="handleAppear"
				@disappear="handleDisappear"
				v-if="videoInit">
					<find-list-video
					class="y-flex-1"
					ref="video"
					autoplay
					:src="item.video.src"
					:poster="item.video.cover"
					:title="item.video.title || item.title"
					:type="item.video.type"
					:is-live="item.video.isLive"
					@download="handleDownload"
					@destroyed="handleDestroyed"></find-list-video>
				</view>
				<template v-else>
					<view class="position-absolute-cover bg-000" @tap="handleTap">
						<find-image
						v-if="item.video.cover"
						:src="item.video.cover"
						class="position-absolute-cover" mode="aspectFill"></find-image>
					</view>
					<view class="position-absolute-cover y-flex y-align-center y-justify-center">
						<view class="t-cell-video-play pt-20 pb-20 pl-40 pr-40 bg-dark-mask border-radius-15" @tap="initVideo">
							<com-icon name="play_fill" size="40rpx" color="#fff"></com-icon>
						</view>
					</view>
				</template>
			</view>
			<scroll-view class="y-flex y-row y-align-center mt-20" :show-scrollbar="false" scroll-x v-if="item.tags && item.tags.length">
				<view class="find_novel_tag mr-20" v-for="(item, index) in item.tags" :key="index" :style="{'border-color': themeColor}" @tap="handleTagTap(item)">
					<text class="fs-28" :style="{color: themeColor}">#{{item.title}}</text>
				</view>
			</scroll-view>
			<text class="mt-30 fs-26" v-if="item.subtext"
			:style="{color: skinColor.color_3}" @tap="handleTap">{{item.subtext}}</text>
		</view>
	</view>
</template>

<script>
	import { pixelunit } from '@/assets/js/util.js'
	import FindListVideo from '../ListVideo.vue'
	import FindImage from '../Image.vue'
	export default {
		name: 'ThreadCell',
		inject: ['getSkinColor', 'navigate', 'getPageStyle', 'download'],
		components: { FindListVideo, FindImage },
		props: {
			item: {
				type: Object,
				default () {
					return new Object
				}
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		computed: {
			skinColor () {
				return this.getSkinColor()
			},
			titleColor () {
				return this.skinColor.color_1
			},
			textColor () {
				return this.skinColor.color_3
			},
			subtextColor () {
				return this.skinColor.color_5
			},
			borderColor () {
				return this.skinColor.color_gap_2
			},
			cellDescriptionLines () {
				return this.options.cellDescriptionLines || 10
			},
			cellImageColumn () {
				return this.options.cellImageColumn || 3
			},
			cellImageHeight () {
				return this.options.cellImageHeight || 190
			},
			cellImageBorderRadius () {
				return this.options.cellImageBorderRadius || 10
			},
			cellImageTipSize () {
				return this.options.cellImageTipSize || 20
			},
			pageStyle () {
				return this.getPageStyle()
			},
			//主题色
			themeColor () {
				return this.pageStyle.themeColor || this.skinColor.color_blue
			}
		},
		data () {
			return {
				videoInit: false//是否渲染video
			}
		},
		methods: {
			_pixelunit (size) {
				return pixelunit(size)
			},
			handleTap () {
				this.navigate(this.item.url)
			},
			handleTagTap (item) {
				this.navigate(item.url)
			},
			handleAppear (e) {
				this.play()
			},
			handleDisappear (e) {
				this.pause()
			},
			handleDownload (item) {
				this.download({...item,
					isAdult: this.item.isAdult
				})
			},
			handleDestroyed () {
				this.videoInit = false
			},
			initVideo (e) {
				e.stopPropagation && e.stopPropagation()
				if ( this.item.video && this.item.video.src ) this.videoInit = true
				else this.handleTap()
			},
			play () {
				this.$refs.video && this.$refs.video.play()
			},
			pause () {
				this.$refs.video && this.$refs.video.pause()
			}
		}
	}
</script>

<style>
	.t-cell-video {
		height: 400rpx;
	}
</style>